<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <link rel="stylesheet" href="../css/soulTable.css" media="all"/>
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>基准记录</legend>
        </fieldset>
        <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md3">
                        <div class="layui-form-item ">
                            <label class="layui-form-label">管路名称</label>
                            <div class="layui-input-block">
                                <select name="pipelineId" id="pipelineId">
                                    <option value="">全部</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item ">
                            <label class="layui-form-label">起始时间</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="startTime" autocomplete="false"
                                       lay-verify="required" id="startTime" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item ">
                            <label class="layui-form-label">结束时间</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="endTime" autocomplete="false"
                                       lay-verify="required" id="endTime" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item ">
                            <button style="float: right" type="submit" class="layui-btn layui-btn-primary"
                                    lay-submit lay-filter="doRecord"><i class="layui-icon"></i> 记录基准
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <fieldset class="layui-elem-field layui-field-title">
            <legend>定时计算</legend>
        </fieldset>
        <div style="margin: 10px 10px 10px 10px">
            <script type="text/html" id="schedulerJobTableToolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add">添加
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete">删除
                    </button>
                </div>
            </script>
            <table class="layui-hide" id="schedulerJobTable" lay-filter="schedulerJobTable"></table>
            <script type="text/html" id="schedulerJobTableBar">
                <a class="layui-btn layui-btn-normal layui-btn-sm data-count-edit" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-sm data-count-delete" lay-event="delete">删除</a>
            </script>
        </div>
    </div>
</div>
<div style="display: none" id="schedulerJobPanel">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane" action="" id="schedulerJobFrm" lay-filter="schedulerJobFrm">
                <div class="layui-form-item ">
                    <label class="layui-form-label">任务分组</label>
                    <div class="layui-input-block">
                        <input hidden="hidden" name="id">
                        <input type="text" class="layui-input" name="jobGroup" autocomplete="false"
                               lay-verify="required" id="jobGroup">
                    </div>
                </div>
                <div class="layui-form-item ">
                    <label class="layui-form-label">任务名称</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="jobName" autocomplete="false"
                               lay-verify="required" id="jobName">
                    </div>
                </div>
                <div class="layui-form-item ">
                    <label class="layui-form-label">任务概述</label>
                    <div class="layui-input-inline">
                        <select name="pipeLineId" id="jobPipelineId">
                        </select>
                    </div>
                    <div class="layui-form-mid layui-word-aux">泄漏定时计算</div>
                </div>
                <div class="layui-form-item ">
                    <label class="layui-form-label">执行间隔</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="jobInterval" autocomplete="false"
                               lay-verify="required|number">
                    </div>
                    <div class="layui-form-mid layui-word-aux">分钟</div>
                </div>
                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">执行方式</label>
                    <div class="layui-input-block">
                        <input type="radio" name="runType" value="0" title="延迟执行" checked>
                        <input type="radio" name="runType" value="1" title="立即执行">
                    </div>
                </div>
                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">任务状态</label>
                    <div class="layui-input-block">
                        <input type="checkbox" checked="" name="status" lay-skin="switch" lay-text="启用|禁用">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">任务描述</label>
                    <div class="layui-input-block">
                        <textarea type="text" class="layui-textarea" name="desc" autocomplete="false"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn" lay-submit="" lay-filter="saveJob">提交</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/html" id="schedulerJobStatus">
    {{# if(d.status==='on'){ }}
    <button class="layui-btn layui-btn-normal layui-btn-xs">启用</button>
    {{# }else { }}
    <button class="layui-btn layui-btn-danger layui-btn-xs">禁用</button>
    {{# } }}
</script>
<script type="text/html" id="schedulerJobRunType">
    {{# if(d.runType===1){ }}
    <span>立即执行</span>
    {{# }else{ }}
    <span>延迟执行</span>
    {{# } }}
</script>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['form', 'laydate', 'layer', 'table'], function () {
        const form = layui.form,
            laydate = layui.laydate,
            layer = layui.layer,
            table = layui.table,
            $ = layui.jquery;

        getPipelineOption();

        renderDateInput();

        table.render({
            elem: '#schedulerJobTable',
            url: '/schedulerJob/list',
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data //解析数据列表
                };
            },
            toolbar: '#schedulerJobTableToolbar',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'jobGroup', title: '任务分组'},
                {field: 'jobName', title: '任务代号'},
                {field: 'content', title: '任务概述'},
                {field: 'jobInterval', title: '任务间隔(分钟)'},
                {field: 'runType', title: '执行类型', templet: '#schedulerJobRunType'},
                {field: 'status', title: '任务状态', templet: '#schedulerJobStatus'},
                {title: '操作', width: 156, templet: '#schedulerJobTableBar'},
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line',
            done: function () {
            }
        });

        var panelIndex, url;

        table.on('toolbar(schedulerJobTable)', function (obj) {
            if (obj.event === 'add') {
                $("#jobName").removeAttr("readOnly");
                $("#jobGroup").removeAttr("readOnly");
                panelIndex = layer.open({
                    title: '添加定时任务',
                    type: 1,
                    shade: 0.2,
                    shadeClose: true,
                    area: ['480', '400'],
                    content: $("#schedulerJobPanel"),
                    success: function () {
                        url = '/schedulerJob/save';
                        $("#schedulerJobFrm").trigger('reset');
                    }
                });
            } else if (obj.event === 'delete') {
                var checkStatus = table.checkStatus('schedulerJobTable')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
        });

        table.on('tool(schedulerJobTable)', function (obj) {
            const data = obj.data;
            console.log(JSON.stringify(obj));
            if (obj.event === 'edit') {
                $("#jobName").attr("readOnly", "true");
                $("#jobGroup").attr("readOnly", "true");
                panelIndex = layer.open({
                    title: '添加定时任务',
                    type: 1,
                    shade: 0.2,
                    shadeClose: true,
                    area: ['480', '400'],
                    content: $("#schedulerJobPanel"),
                    success: function () {
                        url = '/schedulerJob/update';
                        obj.data.status = obj.data.status === 'on'
                        form.val('schedulerJobFrm', obj.data);
                    }
                });
            } else if (obj.event === 'delete') {
                layer.confirm(`真的删除 ${data.content} 定时任务吗?`, function (index) {
                    $.post('/schedulerJob/delete',
                        {
                            id: data.id,
                            jobGroup: data.jobGroup,
                            jobName: data.jobName
                        }, function (res) {
                            layer.msg("删除成功");
                            table.reload('schedulerJobTable', {
                                page: {
                                    curr: 1
                                }
                            })
                            layer.close(index);
                        });
                });
            }
        });

        form.on("submit(doRecord)", function (data) {
            let loadingIndex;
            $.ajax({
                type: "post",
                url: '/flow/recordStand',
                data: data.field,
                beforeSend: function () {
                    loadingIndex = layer.load(2)
                },
                success: function (res) {
                    layer.msg(res.msg, {icon: 3});
                    layer.close(loadingIndex);
                }
            });
            return false;
        });

        form.on("submit(saveJob)", function (data) {
            data.field.content = "[" + $("#jobPipelineId").find("option:selected").text() + "]泄漏定时计算"
            $.post(url, data.field, function (res) {
                if (res.code === 0) {
                    layer.msg(res.msg, {icon: 1});
                    table.reload('schedulerJobTable')
                    layer.close(panelIndex)
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            })
            console.log(JSON.stringify(data.field));
        })

        function renderDateInput() {
            const dataFormat = "yyyy/MM/dd HH:mm:ss";

            laydate.render({
                elem: '#startTime'
                , type: 'datetime'
                , format: dataFormat
            });

            laydate.render({
                elem: '#endTime'
                , type: 'datetime'
                , format: dataFormat
            });
        }

        function getPipelineOption() {
            let html = `<option value="">全部</option>`;
            $.get('/pipeline/listId', function (res) {
                if (res.data != null) {
                    $.each(res.data, function (index, item) {
                        html += `<option value="${item.id}">${item.name}</option>`
                    });
                }
                $("#pipelineId").html(html);
                $("#jobPipelineId").html(html);
                form.render('select');
            });
        }
    });
</script>
</body>
</html>